<template>
  <div class="banner">
    <div class="container">
      <el-carousel 
        height="400px" 
        :interval="3000" 
        :autoplay="true"
        indicator-position="outside"
        arrow="hover"
        @change="handleSlideChange"
      >
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <div class="banner-item" @click="handleBannerClick(item)">
            <el-image 
              :src="item.image" 
              :alt="item.title"
              fit="cover"
              lazy
              :preview-src-list="[item.image]"
            >
              <template #error>
                <div class="image-error">
                  <picture-filled />
                  <span>加载失败</span>
                </div>
              </template>
              <template #placeholder>
                <div class="image-placeholder">
                  <loading class="is-loading" />
                  <span>加载中...</span>
                </div>
              </template>
            </el-image>
            <div class="banner-info">
              <h3>{{ item.title }}</h3>
              <p v-if="item.description">{{ item.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { PictureFilled, Loading } from '@element-plus/icons-vue'

const router = useRouter()

// 轮播图数据
const bannerList = ref([
  {
    id: 1,
    title: '活动banner1',
    description: '活动详情描述1',
    image: 'https://picsum.photos/1200/400?random=1',
    link: '/activity/1'
  },
  {
    id: 2,
    title: '活动banner2',
    description: '活动详情描述2',
    image: 'https://picsum.photos/1200/400?random=2',
    link: '/activity/2'
  },
  {
    id: 3,
    title: '活动banner3',
    description: '活动详情描述3',
    image: 'https://picsum.photos/1200/400?random=3',
    link: '/activity/3'
  }
])

// 当前轮播索引
const currentIndex = ref(0)

// 自动播放控制
const autoplayTimer = ref(null)
const autoplayInterval = 3000

// 点击banner处理
const handleBannerClick = (banner) => {
  if (banner.link) {
    router.push(banner.link)
  }
}

// 轮播切换处理
const handleSlideChange = (index) => {
  currentIndex.value = index
}

// 开始自动播放
const startAutoplay = () => {
  if (autoplayTimer.value) return
  autoplayTimer.value = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % bannerList.value.length
  }, autoplayInterval)
}

// 停止自动播放
const stopAutoplay = () => {
  if (autoplayTimer.value) {
    clearInterval(autoplayTimer.value)
    autoplayTimer.value = null
  }
}

// 组件挂载时启动自动播放
onMounted(() => {
  startAutoplay()
})

// 组件卸载时清理定时器
onUnmounted(() => {
  stopAutoplay()
})
</script>

<style scoped>
.banner {
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
}

.container {
  width: 100%;
  margin: 0;
  padding: 0;
}

.banner-item {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
  border-radius: 0 16px 16px 0;
}

:deep(.el-carousel__item),
:deep(.el-image) {
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.banner-info {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: white;
}

.banner-info h3 {
  margin: 0;
  font-size: 24px;
  margin-bottom: 10px;
}

.banner-info p {
  margin: 0;
  font-size: 16px;
  opacity: 0.8;
}

/* 加载状态样式 */
.image-placeholder,
.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
  color: #909399;
}

.image-placeholder .el-icon,
.image-error .el-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

/* 自定义指示器样式 */
:deep(.el-carousel__indicator) {
  padding: 12px 4px;
}

:deep(.el-carousel__button) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  transition: all 0.3s;
}

:deep(.el-carousel__indicator.is-active .el-carousel__button) {
  width: 24px;
  border-radius: 12px;
  background-color: var(--primary-color);
}

/* 自定义箭头样式 */
:deep(.el-carousel__arrow) {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  transition: all 0.3s;
}

:deep(.el-carousel__arrow:hover) {
  background-color: rgba(0, 0, 0, 0.5);
}

.banner-right {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 0 16px 16px 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin-left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 360px; /* 推荐高度 */
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.banner-right > * {
  width: 100%;
  height: 100%;
  border-radius: 0 16px 16px 0;
  object-fit: cover;
  background: #f5f5f5;
  /* 让图片在容器内居中显示 */
  display: block;
}
</style>